import * as three from "three";
import { Sprite } from "three";


//==========套路部分，这个部分的代码基本不用管
var render: three.WebGLRenderer;
var camera: three.OrthographicCamera;
var scene: three.Scene;
var textureLoader: three.TextureLoader;
window.onload = () => {
    //threejs基本组件的初始化，这是个固定过程，一开始不需要理解，照着抄就行
    render = new three.WebGLRenderer();//渲染器
    render.setClearColor(0xff80ff);//背景色

    //摄像机，2d只需要用正交投影，这里只做个基本的初始化
    camera = new three.OrthographicCamera(-100, 100, 100, -100);
    camera.position.set(0, 0, 10);
    camera.lookAt(0, 0, 0);

    //场景
    scene = new three.Scene();

    //贴图加载模块
    textureLoader = new three.TextureLoader();

    onInit();

    //开始主循环
    looper();


};

function looper(): void {
    onUpdate();

    render.render(scene, camera);

    requestAnimationFrame(looper);
}


function setSize(w: number, h: number): void {
    render.setSize(w, h);


    var asp = w / h;
    //适配思路，宽度固定200；
    var camerawidth = 200;
    var cameraheight = camerawidth / asp;

    //camera的高度可以点对点
    //camera.bottom = -h / 2;
    //camera.top = h / 2;
    camera.bottom = cameraheight * -0.5;
    camera.top = cameraheight * 0.5;
    //也可以不点对点

    camera.left = camerawidth * -0.5;
    camera.right = camerawidth * 0.5;
    camera.updateProjectionMatrix();
}

//====逻辑部分
var sprites: three.Sprite[];
var back: three.Mesh;
function onInit() {
    //render会创建一个canvas，下面是控制他的尺寸


    //放进我们指定的区域
    var _div = document.getElementById("threejswin") as HTMLDivElement;
    _div.appendChild(render.domElement);
    //size
    setSize(_div.clientWidth, _div.clientHeight);
    window.addEventListener("resize", () => {
        setSize(_div.clientWidth, _div.clientHeight);
    });
    //加载贴图，初始化材质

    //这个tex是异步加载的，所以其实一开始会画不出来，过几帧加载出来才能显示，一开始无须处理这些细节
    var tex = textureLoader.load("imgs/tut.png");

    var texback = textureLoader.load("imgs/back.jpg");

    //因为我们的画布单位宽度为200，所以一个200的plane 永远横向撑满整个画布
    var plane = new three.PlaneGeometry(200, 300);
    var uv = plane.getAttribute("uv");
    uv.setXY(0, 0.1, 0.9);//左上
    uv.setXY(1, 0.9, 0.9);//右上
    uv.setXY(2, 0.1, 0.1);//左下
    uv.setXY(3, 0.9, 0.1);//右下
    back = new three.Mesh(plane, new three.MeshBasicMaterial(
        { map: texback }
    ));

    //默认相机是从 10 看向0 ， 所以大于9.9就没了,离相机太近看不见
    //数字越小越在地下，数字越大越在上面
    //< -1990 也没了，离相机太远也看不见
    var z=-0.1;
    back.position.set(0, 0, z);
    scene.add(back);

    //初始化100个精灵
    sprites = [];
    for (var i = 0; i < 100; i++) {
        //three.sprite
        var mat = new three.SpriteMaterial({
            map: tex,
            blending: three.NormalBlending,
            color: new three.Color(i / 100, 0.5, 0.5)
        });
        var sprite = new three.Sprite(mat);
        sprite.scale.set(30, 30, 1);
        scene.add(sprite);
        sprites.push(sprite);
    }
}
var timer = 0;
function onUpdate() {
    timer += 0.016;
    if (timer > 2.0) {
        timer = 0;
    }
    if (timer > 1.0) {
        //随机滚动这些精灵
        for (var i = 0; i < sprites.length; i++) {
            var ranx = (Math.random() * 2 - 1) * 100;
            var rany = (Math.random() * 2 - 1) * 100;
            var sprite = sprites[i];
            sprite.position.set(ranx, rany, 0);
        }
    }

}